<!-- pages/verify/input.vue -->
<template>
  <view class="page-container">
    <!-- 顶部输入栏 -->
    <view class="input-section">
      <uni-search-bar 
        v-model="verifyCode"
        placeholder="请输入核销码"
        bg-color="#fff"
        radius="40"
        clearable
        @confirm="handleVerify"
      >
        <template #right>
          <button 
            class="scan-btn"
            :disabled="isVerifying"
          >
            <uni-icons type="scan" size="22" color="#1890ff" />
          </button>
        </template>
      </uni-search-bar>
    </view>

    <!-- 主体信息 -->
    <view v-if="showContent" class="main-content">
      <!-- 核销码显示 -->
      <view class="code-display">
        <text class="code-text">{{ currentCode }}</text>
        <text class="code-label">当前核销码</text>
      </view>

      <!-- 服务内容 -->
      <view class="service-section">
        <view class="section-title">服务项目</view>
        <view 
          v-for="(item, index) in orderDetail.services" 
          :key="index"
          class="service-item"
        >
          <view class="service-info">
            <uni-icons type="checkmark" size="16" color="#52c41a" />
            <text class="service-name">{{ item.name }}</text>
          </view>
          <text class="service-price">¥{{ item.price.toFixed(2) }}</text>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-section">
        <view class="section-title">订单详情</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">订单总额</text>
            <text class="info-value">¥{{ orderDetail.totalAmount.toFixed(2) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">优惠金额</text>
            <text class="info-value discount">-¥{{ orderDetail.discount.toFixed(2) }}</text>
          </view>
          <view class="info-item highlight">
            <text class="info-label">实付金额</text>
            <text class="info-value">¥{{ orderDetail.paymentAmount.toFixed(2) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">订单编号</text>
            <text class="info-value">{{ orderDetail.orderNumber }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">支付时间</text>
            <text class="info-value">{{ formatTime(orderDetail.payTime) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">预约时间</text>
            <text class="info-value">{{ formatTime(orderDetail.reserveTime) }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-footer">
        <button 
          class="verify-btn"
          :class="{ verified: isVerified }"
          :disabled="isVerified || isVerifying"
          @tap="showVerifyConfirm"
        >
          {{ isVerified ? '已核销' : '确认核销' }}
        </button>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view v-else class="empty-tip">
      <image src="/static/empty-order.png" class="empty-image" />
      <text class="empty-text">请输入有效的核销码查询订单信息</text>
    </view>

    <!-- 核销确认弹窗 -->
    <uni-popup ref="verifyPopup" type="dialog">
      <uni-popup-dialog
        type="warning"
        title="操作确认"
        :content="verifyDialogContent"
        @confirm="handleVerification"
        confirmText="确认核销"
      />
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 状态管理
const verifyCode = ref('')
const currentCode = ref('')
const showContent = ref(false)
const isVerifying = ref(false)
const isVerified = ref(false)

// 订单数据模型
const orderDetail = reactive({
  orderNumber: '',
  totalAmount: 0,
  discount: 0,
  paymentAmount: 0,
  payTime: 0,
  reserveTime: 0,
  services: [],
  verified: false
})

// 工具函数
const formatTime = timestamp => {
  if (!timestamp) return '--'
  const date = new Date(timestamp)
  return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
}

const pad = n => n.toString().padStart(2, '0')

// 核销码验证
const validateCode = code => {
  return /^[A-Z0-9]{6}$/.test(code)
}

// 模拟订单数据
const mockOrderData = code => {
  return {
    orderNumber: `DD${code}`,
    totalAmount: 599,
    discount: 100,
    paymentAmount: 499,
    payTime: Date.now() - 3600000,
    reserveTime: Date.now() - 86400000,
    services: [
      { name: '全车精洗', price: 199 },
      { name: '内饰深度清洁', price: 299 },
      { name: '臭氧消毒', price: 99 }
    ]
  }
}

// 事件处理
const handleVerify = async () => {
  if (!validateCode(verifyCode.value)) {
    uni.showToast({ title: '核销码格式错误', icon: 'none' })
    return
  }

  try {
    isVerifying.value = true
    uni.showLoading({ title: '查询中...' })

    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 800))
    
    const data = mockOrderData(verifyCode.value)
    Object.assign(orderDetail, data)
    currentCode.value = verifyCode.value
    showContent.value = true
    isVerified.value = data.verified
  } catch (error) {
    uni.showToast({ title: '查询失败', icon: 'none' })
  } finally {
    isVerifying.value = false
    uni.hideLoading()
  }
}

// 扫码识别
// const handleScan = async () => {
//   try {
//     const res = await uni.scanCode()
//     verifyCode.value = res.result
//     handleVerify()
//   } catch (error) {
//     uni.showToast({ title: '扫码失败', icon: 'none' })
//   }
// }

// 核销操作
const verifyPopup = ref()
const verifyDialogContent = computed(() => 
  `确认核销订单：${orderDetail.orderNumber}?\n此操作不可撤销！`
)

const showVerifyConfirm = () => {
  verifyPopup.value.open()
}

const handleVerification = async () => {
  try {
    uni.showLoading({ title: '核销中...' })
    
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 800))
    
    isVerified.value = true
    orderDetail.verified = true
    uni.showToast({ title: '核销成功', icon: 'success' })
  } catch (error) {
    uni.showToast({ title: '核销失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

onLoad((options) => {
  if (options.code) {
    verifyCode.value = decodeURIComponent(options.code)
    handleVerify() // 自动触发验证
	console.log(2222)
  }
})


</script>

<style lang="scss" scoped>
.page-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.input-section {
  padding: 24rpx;
  background: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .scan-btn {
    padding: 0 20rpx;
    background: transparent;
    &::after { border: none; }
  }
}

.code-display {
  text-align: center;
  padding: 48rpx 0;
  background: #fff;
  margin: 24rpx;
  border-radius: 16rpx;
  
  .code-text {
    display: block;
    font-size: 64rpx;
    color: #1890ff;
    font-weight: bold;
    letter-spacing: 8rpx;
    margin-bottom: 16rpx;
  }
  
  .code-label {
    font-size: 28rpx;
    color: #999;
  }
}

.service-section {
  background: #fff;
  margin: 24rpx;
  border-radius: 16rpx;
  padding: 32rpx;
  
  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .service-info {
      display: flex;
      align-items: center;
      
      .uni-icons {
        margin-right: 12rpx;
      }
    }
    
    .service-name {
      color: #333;
      font-size: 28rpx;
    }
    
    .service-price {
      color: #e4393c;
      font-weight: 500;
    }
  }
}

.order-section {
  background: #fff;
  margin: 24rpx;
  border-radius: 16rpx;
  padding: 32rpx;
  
  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    
    .info-item {
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 8rpx;
      
      &.highlight {
        background: #e6f7ff;
        grid-column: span 2;
      }
      
      .info-label {
        display: block;
        color: #666;
        font-size: 24rpx;
        margin-bottom: 8rpx;
      }
      
      .info-value {
        color: #333;
        font-size: 28rpx;
        font-weight: 500;
        
        &.discount {
          color: #52c41a;
        }
      }
    }
  }
}

.action-footer {
  padding: 32rpx 24rpx;
  
  .verify-btn {
    background: #1890ff;
    color: #fff;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    transition: all 0.3s;
    
    &.verified {
      background: #bae7ff;
      color: #1890ff;
    }
    
    &[disabled] {
      opacity: 0.6;
      background: #f5f5f5;
      color: #999;
    }
  }
}

.empty-tip {
  text-align: center;
  padding-top: 120rpx;
  
  .empty-image {
    width: 50rpx;
    height: 50rpx;
  }
  
  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}
</style>
